import React, { Component } from "react";
import "../styles/MyList.css";

// 导入封装的方法
import {index_goodslist} from "../api/index"
// 在class类组件中，任何一个方法内都可以通过this获取当前组件实例
class MyList extends Component {
  // 初始化组件数据
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }


  add=()=>{
    console.log(this);
  }
  componentDidMount(){

    index_goodslist({page:1,count:50}).then((res)=>{
        console.log(res.data.list);
        this.setState({list:res.data.list})
    })
  }
// 负责组件渲染
  render() {
    return (
      <div className="tuijian">
        {
                 // 如果没数据
              this.state.list.length!=0?
              // 有数据的话显示的是这个
            this.state.list.map((v,i)=>{
                return (
                    <div className="tuijian-box" key={i}>
                        <div className="tuijian-text">
                        <img src={v.pic} alt="" />
                        </div>
                        <div className="reduce">
                            {v.name}
                        </div>
                        <div className="salesPrice">
                          抢购价${v.salesPrice.value}
                        </div>
                    </div>
           
                    
                )
            })
            // 没数据显示的是这个
            :<div className="yichang">
            网路异常,请刷新重试 
            </div> 
        }
      </div>
    );
  }
}

export default MyList;
